<template>
  <div class="nav-bgc">
    <nav class="nav-menu">
    <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">首页
      <span>Home</span>
    </router-link>
    <router-link to="/about" class="nav-item" :class="{ active: $route.path === '/about' }">走进才知
      <div class="dropdown">
        <a v-for="(item, index) in subMenus.about" :key="index" @click.prevent="navigateToSubPage('/about', index)">{{ item }}</a>
      </div>
    </router-link>
    <router-link to="/news" class="nav-item" :class="{ active: $route.path === '/news' }">才知动态
      <div class="dropdown">
        <a v-for="(item, index) in subMenus.news" :key="index" @click.prevent="navigateToSubPage('/news', index)">{{ item }}</a>
      </div>
    </router-link>
    <router-link to="/missions" class="nav-item" :class="{ active: $route.path === '/missions' }">集团业务
      <div class="dropdown">
        <a v-for="(item, index) in subMenus.missions" :key="index" @click.prevent="navigateToSubPage('/missions', index)">{{ item }}</a>
      </div>
    </router-link>
    <router-link to="/operation" class="nav-item" :class="{ active: $route.path === '/operation' }">战略合作
      <div class="dropdown">
        <a v-for="(item, index) in subMenus.operation" :key="index" @click.prevent="navigateToSubPage('/operation', index)">{{ item }}</a>
      </div>
    </router-link>
    <router-link to="/culture" class="nav-item" :class="{ active: $route.path === '/culture' }">集团文化
      <div class="dropdown">
        <a v-for="(item, index) in subMenus.culture" :key="index" @click.prevent="navigateToSubPage('/culture', index)">{{ item }}</a>
      </div>
    </router-link>
    <router-link to="/careers" class="nav-item" :class="{ active: $route.path === '/careers' }">人力资源
      <div class="dropdown">
        <a v-for="(item, index) in subMenus.careers" :key="index" @click.prevent="navigateToSubPage('/careers', index)">{{ item }}</a>
      </div>
    </router-link>
  </nav>
  </div>

</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { subMenuTitles } from '../utils/breadcrumbConfig';

const router = useRouter();
const route = useRoute();
const subMenus = ref(subMenuTitles);

// 导航到子页面
const navigateToSubPage = (mainPath, subIndex) => {
  router.push({ path: mainPath, query: { sub: subIndex } });
  
  // 延迟触发事件，确保路由导航已完成
  setTimeout(() => {
    // 触发自定义事件，通知面包屑组件更新
    window.dispatchEvent(new CustomEvent('setSubMenuIndex', { 
      detail: { 
        path: mainPath,
        index: subIndex 
      } 
    }));
  }, 100);
};
</script>

<style scoped>
body {
  padding: 0;
  margin: 0;
}

.nav-bgc {
  width: 100%;
  height: 108px; /* 与nav-menu高度相同(50px)加上padding-top(58px) */
  background-color: #8B4513; /* 咖啡色 */
  display: flex;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 在nav-bgc之前添加伪元素，用于实现全宽度背景 */
.nav-bgc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  height: 100%;
  background-color: #8B4513; /* 咖啡色 */
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
}

.nav-menu {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  gap: 92px; /* 子元素之间的间距 */
  width: 1200px;
  height: 50px;
  padding-top: 58px;
  margin: 0 auto; /* 水平居中 */
  background-color: transparent; /* 透明背景 */
  position: relative;
  max-width: 100%;
}

/* 媒体查询，确保在小屏幕上也保持合理间距 */
@media (max-width: 1220px) {
  .nav-menu {
    width: 95%;
    gap: 30px;
  }
}

.nav-item {
  flex: 1; /* 每个子元素占据相等的宽度 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100%; /* 高度与父元素一致 */
  width: 100%; /* 宽度与父元素一致 */
  box-sizing: border-box; /* 防止边框影响布局 */
  position: relative; /* Ensure the parent is positioned relative */
  transition: color 0.3s; /* 添加颜色过渡效果 */
}

.nav-item a {
  text-decoration: none;
  color: #fff; /* 白色文字适合咖啡色背景 */
  font-size: 16px;
  width: 92px;
}

.nav-item {
  color: #fff; /* 白色文字适合咖啡色背景 */
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 0;
}

.nav-item:hover {
  background-color: #723316;
}

.nav-item a:hover {
  background-color: #A0522D; /* 稍浅的咖啡色悬停效果 */
  color: #FFD700; /* 金色文字悬停效果 */
}

.nav-item.active {
  color: #FFD700; /* 金色活动状态 */
  font-weight: 600;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 92px;
  height: 2px;
  background-color: #FFD700; /* 金色下划线 */
  transform: none; /* 防止与悬停箭头旋转冲突 */
}

/* 添加箭头指示下拉菜单 */
.nav-item:not(:first-child)::before {
  content: '▼';
  font-size: 10px;
  margin-left: 5px;
  color: #FFD700;
  position: absolute;
  right: -15px;
  transition: transform 0.3s ease;
}

.nav-item:hover::before {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: 100%; /* Position the dropdown below the nav item */
  left: 0;
  background-color: #8B4513; /* 与主背景同色 */
  min-width: 92px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  padding: 5px 0;
}

.dropdown a {
  margin-top: 0;
  color: #fff; /* 白色文字 */
  text-decoration: none;
  display: block;
  padding: 6px 12px;
  transition: all 0.3s ease; /* 添加所有属性的过渡效果 */
  font-size: 14px;
}

.dropdown a:hover {
  background-color: #A0522D; /* 稍浅的咖啡色悬停效果 */
  color: #FFD700; /* 金色文字悬停效果 */
  padding-left: 18px; /* 悬停时文字右移效果 */
}

.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
</style>